<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式</title>
</head>
<body>
    <!-- 选项式 API -->
    <p>选项式 API</p>
    <div id="app">
        <p>count is {{ count }}</p>
    </div>
    <script type="module">
        import { createApp } from 'https://lib.baomitu.com/vue/3.2.31/vue.esm-browser.js'

        const app = createApp({
            data() {
                return {
                    count: 0,
                    someObject: {}
                }
            },
            // mounted 是声明周期函数
            mounted() {
                // this 指的是当前组件实例
                console.log(this.count);
                this.count = 2

                const newObject = {}
                this.someObject = newObject
                console.log(this.someObject, newObject, this.someObject === newObject)
            }
        });
        app.mount("#app");
    </script>



    <div id="app2">
        <p>count is {{ count }}</p>
        <button @click="increment">count + 1</button>
    </div>
    <script type="module">
        import { createApp, nextTick } from 'https://lib.baomitu.com/vue/3.2.31/vue.esm-browser.js'
        const app = createApp({
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                // 此方法将挂载到组件实例 `this` 上，在模板或者生命周期函数中都可以调用此方法
                increment() {
                    this.count++

                    console.log('更新前: ', JSON.stringify(this.count))
                    nextTick(() => {
                        // 访问更新后的 count
                        console.log('更新后: ', this.count)
                    })
                }
            }
        })
        app.mount('#app2')
    </script>


    <!-- 组合式 API -->
    <p>组合式 API</p>
    <div id="app3">
        <p>count is {{ state.count }}</p>
        <button @click="increment">v3 count++</button>
    </div>
    <script type="module">
        import { createApp, reactive } from 'https://lib.baomitu.com/vue/3.2.31/vue.esm-browser.js'

        const app = createApp({
            setup() {
                // reactive 声明一个对象为响应式
                const raw = { count: 0 }
                let state = reactive(raw)
                // reactive 返回的是一个代理对象, 它与原始对象是不相同的
                console.log('state:', state, state === raw)

                // (建立响应式之后, 不应该重新再新建)如果重新新建 state, 则count1不会是响应式的
                state = reactive({ count1: 10 })

                // 修改状态的函数
                function increment() {
                    state.count++
                }

                // 将状态和函数都暴露出来以供使用
                return {
                    state,
                    increment
                }
            }
        })
        app.mount('#app3')
    </script>

    <div id="app4">
        <p>count is {{ count }}</p>
        <p>objRef is {{ objRef.objCount2 }}</p>
        <button @click="increment">ref count++</button>
    </div>
    <script type="module">
        import { createApp, ref } from 'https://lib.baomitu.com/vue/3.2.31/vue.esm-browser.js'
        const app = createApp({
            setup() {
                const count = ref(0)
                // .value 是响应式的
                console.log('count: ', count, count.value)
                count.value++
                console.log('count++ 后: ', count, count.value)

                function increment() {
                    count.value++

                    objRef.value.objCount2++
                }

                // 当值是对象类型时, 会使用 reactive() 来进行转换
                const objRef = ref({ objCount: 0 })
                // 一个包含对象类型值的 ref 可以响应式地替换整个对象
                objRef.value = { objCount2: 3 }
                console.log('objRef: ', objRef, objRef.value)
                

                return {
                    count,
                    increment,

                    objRef
                }
            }
        })
        app.mount('#app4')
    </script>
</body>
</html>